اهمیت و نقش کنتراست در طراحی رابط کاربری

اهمیت و نقش کنتراست در طراحی رابط کاربری

مفاهیم بسیار گسترده و متنوعی در طراحی رابط کاربری وجود دارد که یکی از مهم‌ترین آن‌ها کنتراست است. کنتراست در طراحی UI نقش پررنگی دارد و با استفاده از چنین قابلیتی تضاد بین طرح‌ها و رنگ‌ها به خوبی مشخص می‌شود. بهترین رابط‌های کاربری که طراحی خیره‌کننده و کاربرپسندی دارند، از کنتراست‌های مناسب و کاربردی استفاده می‌کنند. برخی از طراحان اعتقاد دارند با استفاده از تضاد مناسب، دسترسی کاربر به گزینه‌ها بسیار راحت‌تر می‌شود و توجه کاربران به قسمت‌های کلیدی افزایش پیدا می‌کند.

ویژگی کنتراست در طراحی رابط کاربری

کنتراست به تفاوت در ویژگی‌های بصری عناصر در یک رابط کاربری اشاره دارد. این ویژگی را می‌توان در تفاوت‌هایی در رنگ، اندازه یا فاصله بین تصاویر و کلمات نیز پیدا کرد. برای ایجاد رابط کاربری یکپارچه و مناسب، باید به سلسله مراتب تصویری توجه ویژه‌ای کرد. کنتراست تعامل بسیار بهتری بین محصول و کاربر ایجاد می‌کند و کاربر دسترسی ساده‌تری به بخش‌های مختلف محصول خواهد داشت.

هنگامی که در طراحی UI به تضاد رنگ‌ها، تصاویر، اندازه‌ها و فاصله‌ها دقت کافی نشود، کاربر گیج می‌شود و تعامل درستی با محصول برقرار نمی‌کند. البته کنتراست در شاخه‌های هنری نیز به خوبی دیده می‌شود. کنتراست موضوعی است که در بسیاری از مباحث زیبایی‌شناسی نیز به آن پرداخته می‌شود و حتی در دکوراسیون نیز از این قانون استفاده می‌کنند.

انواع مختلف کنتراست از تفاوت رنگ تا اندازه

رنگ  

یکی از مهم ترین تضادها تضاد رنگ است.کنتراست رنگ بر خوانایی و دسترسی پذیری تاثیرگذار است.کنتراست بالا بین رنگ های متن و پس زمینه موجب خوانایی بهتر متن میشود و همچنین افرادی که دارای اختلالات بینایی هستندارتباط بسیار بهتری با سایت یا اپلیکیشن برقرار میکنند .

زمانی که به تضاد رنگ توجه نشود چشمان مخاطب خسنه شده و تعامل کاربر با محصول کاهش پیدا میکند.

 یک رنگ در خالص‌ترین و درخشان‌ترین حالت خودش دارای مقدار اشباع %100 است و رنگی که کم‌ترین میزان اشباع را دارد نیز رنگ خاکستری است. استفاده از رنگ‌های روشن یا تیره (خواه به صورت تنها یا ترکیبی) می‌تواند یک روش راهبردی برای ایجاد محل‌های با کنتراست بالا یا پایین در طرح باشد. رنگ‌های روشن به ویژه در برابر رنگ سیاه، همیشه توجه افراد را جلب می‌کنند؛ برای برجسته کردن نقاط مهم طراحی، از این رنگ‌ها به دقت استفاده کنید.

تمام رنگ‌ها را می‌توان بر اساس دمای آن‌ها به سه دسته گرم، سرد یا خنثی طبقه‌بندی کرد. رنگ‌های قرمز، نارنجی و زرد، گرم در نظر گرفته می‌شوند، در حالی‌که آبی و سبز، رنگ‌های سرد هستند. رنگ‌های سفید، مشکی و خاکستری، خنثی هستند (رنگ‌های بژ و قهوه‌ای نیز بسته به نحوه استفاده آن‌ها می‌توانند به این دسته تعلق گیرند). ترکیب رنگ‌های با دمای متفاوت، به ویژه رنگ‌های گرم و سرد می‌تواند کنتراست چشم‌گیری ایجاد کند

در طراحی وب‌سایت زیر، رنگ قرمز و نارنجی کاملاً اشباع شده در برابر رنگ سبز با اشباع پایین برای تصویر جنگل قرار گرفته است. این طرح، نه تنها یک طرح رنگ مکمل است (و به این دلیل، طرح چشم‌گیری است) بلکه از سطح مناسبی از اشباع برای چشم‌گیرتر شدن آن استفاده شده است.

کنتراست اندازه    توجه به اندازه فونت ها و عناصر تصویری

این نوع تضاد بر اساس اندازه و ابعاد عناصر مختلف در محصول ایجاد می‌شود. تضاد اندازه توجه کاربر را به قسمت‌های مهم‌تر جلب می‌کند. عناصری که در محصول اهمیت بیشتری دارند باید بزرگ‌تر از سایر بخش‌ها باشند، در حالی که عناصر کم اهمیت‌تر باید کوچک‌تر باشند.

توجه به کنتراست اندازه، باعث می‌شود کاربران درک بهتری از رابط کاربری داشته باشند و بسیار راحت‌تر نیازهای خود را برطرف کنند.

کنتراست علاوه بر افزودن جذابیت بصری به طرح، ایجاد روابط بین عناصر را نیز بهبود می‌بخشد و عناصر طراحی مختلف را اولویت‌بندی می‌کند. اگر تمام اقلام طراحی دارای یک اندازه باشند، سلسله مراتب زیادی وجود نخواهد داشت. هنگامی که کسی طرحی را می‌بیند، کدام عنصر ابتدا به نظر وی مهم‌تر جلوه می‌کند؟ 

جلد مجله زیر دارای یک تصویر بزرگ برای تأکید بر طرح اصلی است اما دیگر عناصر طراحی را تحت تأثیر قرار نمی‌دهد. در واقع، اندازه، شکل و رنگ نوشته، نقطه کانونی عکاسی را تقویت می‌کنند.

تایپوگرافی   اهمین اندازه و نوع فونت ها در طراحی

این تضاد یکی دیگر از موارد مهم در طراحی تجربه کاربری است. تایپوگرافی تا حد زیادی بر خوانایی متن تاثیرگذار است. تایپوگرافی می‌تواند متن و پس‌زمینه متن را به خوبی جدا کند تا کاربران به درستی کلمات و موضوعات مختلف را مشاهده کنند. برای ایجاد کنتراست در تایپوگرافی طراحان می‌توانند از سبک‌ها، وزن‌ها و اندازه‌های مختلف فونت استفاده کنند. ترکیب تکنیک‌های مختلف تایپوگرافی با یکدیگر می‌تواند یک سلسله مراتب تصویری درست ایجاد کند. طراحان باید توجه داشته باشند که متن‌های مهم‌تر در محصول را می‌توانند با فونت‌هایی بزرگ‌تر و پررنگ‌تر نمایش دهند. همچنین مطالبی که به عنوان نقل قول بیان می‌شود، دارای ساختاری متفاوت نسبت به باقی متن‌ها است. با در نظر گرفتن چنین موضوعاتی تعامل کاربر به خوبی با محصول افزایش پیدا می‌کند.

موارد خاصی نیز وجود دارد که هنگام انتخاب و استفاده از فونت‌ها یا ایجاد متن نوشتاری سفارشی برای طرح می‌توان در نظر گرفت. بیایید برخی از این موارد را بررسی کنیم:

مورد اول، ترکیب فونت‌ها است. اگر برای طراحی، بیش‌تر از یک فونت انتخاب می‌کنید، اطمینان حاصل کنید که به اندازه کافی متفاوت خواهند بود، این مورد می‌تواند کلید موفقیت طرح شما باشد. دوم اینکه، فونت‌ها باید از لحاظ بصری از یک‌دیگر قابل تمییز باشند به طوری‌که بتوانید هر فونت را به یک بخش اختصاص دهید. یک فونت ممکن است برای تیتر یا عنوان و فونت دیگری برای متن بدنه استفاده شود. انتخاب فونت‌های خیلی مشابه ممکن است باعث سردرگمی خواننده شود. 

هنگام اعمال قابلیت های نوشتاری مراقب باشید

هنگام ترکیب فونت‌ها باید تلاش کنید تا کنتراست را افزایش دهید اما در عین حال تداخلی هم بین فونت‌های انتخابی وجود نداشته باشد. انتخاب دو فونتی که کاملاً با یک‌دیگر متفاوت باشند، ممکن است جالب به نظر نرسد. قضاوت در مورد این‌ که آیا دو فونت، در کنار هم مناسب به نظر می‌رسند، بیش‌تر به احساس و غریزه فرد بستگی دارد و نه قوانین خاص؛

ایجاد کنتراست با سبک و وزن نوشتار

بسیاری از فونت‌ها دارای ویژگی‌های متفاوتی مانند مورب بودن، ضخیم بودن، متراکم بودن و غیره هستند. وجود این مشخصات، استفاده از فونت‌ها را راحت‌تر می‌کند. حتی اگر فقط از یک فونت در طراحی استفاده کنید، این خصوصیات می‌توانند به سازمان‌دهی متن و ایجاد کنتراست بین ویژگی‌های نوشتاری متفاوت کمک کند. اندازه فونت و رنگ متفاوت را برای ایجاد کنتراست بیش‌تر به عنوان تمرین به متون خود اضافه کنید. در طراحی زیر از وزن های سبک و سنگین یک فونت استفاده شده است.

            sans-serif 

ایجاد کنتراست با اشکال    لبه ها و گوشه ها

یکی‌دیگر از شیوه‌هایی که می‌توانید از اشکال در طراحی استفاده کنید، به کار بردن لبه‌ها و گوشه‌ها در عناصر طراحی از جمله نوشته‌ها، کادرها، دکمه‌ها و غیره است. شکل‌های با گوشه‌های گرد دارای ظاهر نرم‌تر، غیر رسمی‌تر و دوستانه‌تری هستند، در حالی‌که شکل‌های با لبه‌ها و گوشه‌های تیز، مرتب‌تر و واضح‌تر به نظر می‌رسند. شما می‌توانید این ویژگی‌ها را در تقابل با هم به کار ببرید، همان‌طور که کاربرد آن‌ها در نوشته‌ها را می‌توانید به خوبی در طرح زیر مشاهده نمایید.

اکثر شکل‌ها را می‌توان در دو دسته، شکل‌های هندسی (مستطیل، مثلث، دایره و غیره) و شکل‌های طبیعی (الهام گرفته از طبیعت) طبقه‌بندی کرد. یکپارچگی زاویه‌ای اشکال هندسی می‌توانند به زیبایی در مقابل ویژگی‌های نامتقارن و منحنی‌گونه شکل‌های طبیعی قرار گیرند. در شکل زیر، طراحی اغلب شامل اشکال طبیعی و تقریباً انتزاعی است که خطوط مستقیم و صاف نوشته‌های طرح را تکمیل و بهبود می‌بخشند.

ایجاد کنتراست با رنگ مایه    

 رنگ مایه یک اصطلاح هنری برای یک رنگ خاص است که به‌طور سنتی به 12 رنگ چرخه رنگ اشاره دارد، اما تئوری رنگ‌ها نیز می‌تواند برای طراحان گرافیک و وب مفید باشد. شما می‌توانید، تعدادی از پالت‌های کلاسیک چرخه رنگ که قرن‌ها توسط طراحان برای ایجاد ترکیبات با کنتراست بالا استفاده می‌شد را انتخاب نمایید. برخی از این موارد عبارتند از:

رنگ‌های مکمل :•

این رنگ ها رنگ های متضاد بر روی چرخه رنگ همانند قرمز-سبز یا آبی-نارنجی هستند . رنگ های مکمل کنتراست و شدت بالایی دارند.

در شکل زیر از یک طرح رنگی ساده و مکمل استفاده شده است که هر دو رنگ، توجه را جلب می‌کنند. استفاده از رنگ‌های مکمل در این طرح باعث سازمان‌دهی بخش‌های مختلف شده است و طرح به چند قسمت مجزا تقسیم می‌شود.

(Complementary(

رنگ سه گانه  

ترکیبی از هر سه رنگی که به طور مساوی روی چرخه رنگ قرار دارد .

رنگ های متساوی الساقین  

در این ترکیب، علاوه بر رنگ اصلی، دو رنگ مکمل آن نیز باید انتخاب شوند. این طرح نیز دارای کنتراست بصری قوی است اما کنتراست آن از ترکیب رنگ مکمل کم تر است.

ایجاد کنتراست با بافت  

بافت ها نیز همانند شکل‌ها زمانی‌ که مشخصات آن‌ها بسیار متفاوت باشند، می‌توانند برای ایجاد کنتراست استفاده شوند، مثلاً بافت سخت در مقابل بافت نرم. بجز زمانی‌ که از یک افکت چاپی خاص یا دیگر تکنیک‌های فیزیکی استفاده می‌کنید، هر بافتی که بکار می‌برید کاملاً بصری خواهد بود. بافت‌های فراوانی را می‌توانید در برنامه‌های طراحی مختلف و هم‌چنین بین منابع رایگان آنلاین پیدا کنید. در شکل زیر، بافت‌های با لوگوی خطی ارائه شده است. استفاده از بافت‌ها، روش‌های خوبی برای ساخت طرح‌های کلاسیک و قدیمی است.

ایجاد کنتراست با وزن بصری  

وزن بصری نیز مانند مقیاس روش دیگری برای اشاره به یک بخش از طراحی و نمایش میزان اهمیت آن است. این ویژگی به روشی اشاره دارد که یک عنصر در مقایسه با باقی طرح قرار می‌گیرد و آن عنصر برجسته‌تر به نظر می‌رسد؛ به عبارت دیگر باعث ایجاد کنتراست بالا می‌شود. بخشی از طراحی که دارای بالاترین وزن بصری است (به احتمال زیاد نقطه کانونی است)، لزوماً نباید بزرگ‌ترین عنصر در صفحه باشد. شما هم‌چنین می‌توانید یک عنصر را با رنگ، بافت، شکل یا هر ویژگی دیگری که آن عنصر را جدا کرده یا توجه افراد را جلب می‌کند، خواناتر و بصری‌تر کنید. برای نمونه نگاهی به کارت‌های زیر بیندازید.

ایجاد کنتراست با فاصله گذاری و بهره گیری از فضای خالی  

در حالی‌که ممکن است پُر کردن فضای صفحه طراحی با اطلاعات زیاد وسوسه کننده باشد، استفاده درست از فضاهای خالی نقش مهمی را در جداسازی و سازمان‌دهی عناصر طراحی برای یک طرح متوازن ایفا می‌کند. هنگام کار با یک طرح شلوغ یا پیچیده، درج فضای خالی اضافی در اطراف عناصر مهم، توجه به آنها را افزایش می‌دهد و تضاد مؤثری بین آن عناصر و باقی طرح ایجاد می‌کند. توجه داشته باشید که فضاهای خالی لزوماً نباید به رنگ سفید باشند.

مشاهده می‌کنید که وب سایت زیر چگونه به طور مؤثر ترکیبی از فضاهای خالی و خطوط نازک مستقیم را برای سازمان‌دهی اطلاعات به کار برده است. هر دو ستون در طرف چپ و راست صفحه با مقدار زیادی فضای خالی احاطه شده است. فضای بیش‌تری نیز در اطراف عکس محصول وجود دارد تا بدین روش این تصویر در مرکز توجه قرار گرفته و توجه خریداران جلب شود.

ایجاد کنتراست با ترکیب موارد مختلف  

در هر طراحی باید مفاهیم توازن و تضاد رعایت شود. چگونه می‌توان یک طرح متوازن ساخت که در عین حال خسته کننده نیز نباشد؟ یا طرحی که پویا باشد ولی آشفته و بهم ریخته نباشد؟ یک راه برای ایجاد تعادل بین این مفاهیم (و حصول کنتراست خوب در طراحی)، این است که انتخاب‌های ترکیبی خوبی داشته باشید. برای درک چگونگی انجام این کار، می‌توانید از تکنیک‌های ترکیب کلاسیک استفاده شده توسط هنرمندان و عکاسان بهره ببرید.

 برخی از این موارد عبارتند از:

قانون سوم 

تصور کنید که طرح خود را هم به طور عمودی و هم افقی به سه قسمت تقسیم می‌کنید. نقطه کانونی خود را بر روی یکی از چهار نقطه‌ای قرار دهید که خطوط خیالی یک‌دیگر را قطع می‌کنند. این کار برای انجام طراحی پویا است؛ هیچ روش سریع‌تری برای یافتن میانه تصویر برای درج عناصر وجود ندارد. در اولین تصویر، سرعنوان طرح وب‌سایت زیر، تصویر گل رز و تیتر تقریباً در مرکز قرار گرفته‌اند، یعنی جایی‌که دو تقاطع بالای «قانون سوم» برای ایجاد ترکیب متعادل و جذاب ترسیم می‌شوند.

طرح قطری  

یک طرح مورب میتواند کمی حرکت را به طرح اضافه کند و به حرکت چشم بیننده مستقیم در سراسر صفحه کمک کند.این طراحی اغلب از لحاظ بصری جالبتر و جذابتر از طراحی مبتنی بر شبکه سنتی است که تنها از جهتگیری افقی و عمودی استفاده میکند.

ایجاد کنتراست با عناصر غیر مرسوم  

طرح‌هایی مانند تصاویر بالا گاهی مؤثر هستند زیرا چندان معمول و مرسوم نیستند. استفاده از این طرح غیرمنتظره می‌تواند روشی عالی در ایجاد کنتراست باشد. به عنوان مثال، پاشیدن کمی رنگ بر روی یک طرح طبیعی می‌تواند یک‌نواختی موجود در طرح را از بین برده و توجه بیننده را جلب کند. نحوه برقراری ارتباط عناصر نوشتاری و عکاسی در صفحه زیر غیرمرسوم است و طرحی ساده‌ با کمی زرق و برق را ارائه می‌دهد.

ایجاد کنتراست با تکرارو الگوها  

روش استفاده از عناصر طراحی تکراری یا الگوها می‌تواند باعث تمرکز یا توجه بصری به شیوه‌ای شبیه به تکنیک‌های ترکیب ذکر شده در بالا شود. تکرار یک طرح بصری می‌تواند تأثیر آن را در طراحی افزایش دهد. در طراحی کارت ویزیت زیر برای ایجاد توازن و قالب‌بندی نقطه کانونی طرح یعنی متن نوشته شده، از یک الگو بهره‌گیری شد. این طرح، نمونه‌ی خوبی از کاربرد این اصل طراحی است. الگو، شکل آرم شخصی طراح را در طرح بازتاب می‌دهد.

ایجاد کنتراست با تعیین موقعیت و جهت  

هر طرحی به ساختار سازمان‌دهی شده نیاز دارد، بدین تریتب که: متن به روش‌های خاصی ترازبندی شود، عناصر در موقعیت‌های خاصی از طرح قرار گیرند، فاصله‌ها تنظیم شوند. در حالی‌که سازگاری، کلید طراحی منظم است، ترکیب عناصر با یک روش هدفمند و محدود نیز می‌تواند کنتراست جالبی را بوجود آورد. لوگوی زیر از جهت‌گیری مورب برای درج بخش کلیدی تصویر در تقابل با متن مرتب و مستقیم اطراف آن استفاده می‌کند. 

ایجاد کنتراست با نزدیکی (اصل مجاورت ) و جداسازی  

گروه‌بندی اشیاء به‌طور هدفمند می‌تواند نشان دهد که آن اشیاء به هم مرتبط هستند و پیمایش در طرح شما با انجام این کار ساده‌تر شده و طرح سازمان یافته‌تر می‌شود. به همین ترتیب، جداسازی اشیاء می‌تواند به تقسیم طراحی به بخش‌‌های متمایز کمک کند. کنتراست را می‌توان با کمیت نیز افزایش داد. یک شی تنها در میان گروهی از چندین شی (یا برعکس) قطعاً برجسته خواهد بود.

برای طراحی متن سنگین مانند رزومه، ایجاد ساختار خوب ضروری است. در شکل زیر، مجاورت، ترازبندی و رنگ برای ایجاد یک صفحه اطلاعاتی با خوانایی آسان ترکیب شدند.

ایجاد کنتراست با نشانه های بصری  

مطالعات نشان داده‌اند که افراد %80 از آن‌چه که می‌بینند را بیاد می‌آورند، این یکی از دلایلی است که باعث می‌شود طراحی، چنین ابزار قدرتمندی باشد؛ اما توجه به طرح می‌تواند کوتاه باشد و گاهی اوقات بینندگان نیاز به کمی راهنمایی دارند تا جهت درست تمرکز بر روی آن را بیابند. در این مواقع، نشانه‌های بصری می‌تواند کمک کننده باشد. یک فلش کوچک یا برجسته کردن یک عنصر با قرار دادن آن درون یک دایره یا یک شکل دیگر می‌تواند توجه افراد را به آن عنصر جلب کند. بلوک‌های متنی که ممکن است به صورت برجسته ظاهر شوند، نقاط دایره‌ای یا آیکون‌هایی که مفاهیم مورد بحث را مشخص می‌کنند نیز نمونه‌های دیگری از کاربرد نشانه‌های بصری هستند. 

ایجاد کنتراست با سبک های ساده و پیچیده  

طرح‌ها می‌توانند سبک‌های ساده و پیچیده یا ویژگی‌های مستقل را برای ایجاد کنتراست ترکیب کنند. این روش نیز نمونه دیگر استفاده از عناصر متضاد برای تقویت یک‌دیگر است. این ایده در مجموعه‌های زیر به خوبی استفاده شده است. در این طرح‌ها، الگوهای گل آراسته و پُر زرق و برق در کنار یک نوشته تمیز و ساده قرار گرفته‌اند. تفاوت بین نوشته و محیط اطراف آن باعث می‌شود که نتیجه نهایی بسیار چشم‌گیر و جذاب باشد.

چگونه در چیدمان کنتراست ایجاد کنیم؟  

چیدمان یک رابط کاربری به شدت بر سازماندهی عناصر مختلف تاثیرگذار است. در چنین مواقعی طراحان حرفه‌ای دسته‌بندی‌های مختلفی از عناصر ایجاد می‌کنند و هر چیدمان را بر این اساس انجام می‌دهند. سلسله مراتب تصویری در کنتراست موجب جلب توجه کاربر می‌شود.

همچنین در طراحی رابط کاربری باید به چیدمان محتوایی نیز دقت کرد. چیدمان محتوایی باعث اثربخشی بهتر محتوا برای کاربر می‌شود و کاربران تعامل سازنده‌تری با محصول برقرار می‎‌کنند. با چیدمان درست و دقیق محصول، راهنمایی و ناوبری کاربران افزایش پیدا می‌کند.

ایجاد کنتراست در دکمه ها وکلید های مختلف محصول  

برای ایجاد کنتراست در دکمه‌ها و کلیدها طراحان می‌توانند در طرح، رنگ و اندازه کلیدها با یکدیگر تفاوت ایجاد کنند. استفاده از اندازه‌ها و اشکال مختلف موجب ایجاد سلسله مراتبی منظم و دقیق می‌شود.

 انواعی از کنتراست های رایج در طراحی رابط کاربری 

فضای بازو بسته

پر و خالی

متقارن و نامتقارن 

بزرگ و کوچک

عناصر پر شده و حاشیه دار

استفاده از فونت های سریف و سنز سریف

مرتب و شلوغ 

دارای بافت و فلت

استفاده بهینه از کنتراست

همانطور که دریافتید، کنتراست طراحی را زیبا و قابل درک می‌کند. اما باید بدانید که میانه‌روی در هر کاری باید در دستورالعمل کار باشد. ضررهایی که استفاده زیاد کنتراست به محصول می‌زند قابل جبران نیست! 

حال باید دید که کنتراست زیاد چه پیامدهایی را برای ما به همراه دارد :

کاربر دلزده میشود  

همانطور که شلوغی‌های طراحی، کاربر را جذب عناصر بی مورد می‌کند و باعث می‌شود در رسیدن به هدف خودش باز بماند، این عمل در کنتراست نیز وجود دارد.

در این بین، کنتراست زیاد، نیاز به تحلیل و درک زیاد دارد، که باعث می‌شود کاربر بسیار خسته شود.

از بین رفتن درک و گیرایی  

اگر در طراحی همه چیز بخواهد جلب توجه کند، عناصر مهم نقش خود را از دست می‌دهند. پس کافیست با استفاده مناسب برای نکات و نقاط کلیدی از این قابلیت استفاده کنید. یک خودروی تاکسی را در نظر بگیرید، اگر تمام خودروها در تمام خیابان زرد رنگ باشند، تشخیص تاکسی برای مسافر، بسیار سخت‌تر خواهد شد.

عناصر و فضای بی روح  

همیشه فضاهای بدون استفاده، برای جلوه دادن به یک عنصر مهم، مفید واقع می‌شوند. در صفحات سایت یا اپلیکیشن‌ها این فضا به وفور دیده می‌شود، چرا که برای جلوه دادن به یک چیز مهم نیاز به آزادسازی فضای اطرافش را دارید.

این موضوع در چیدمان ویترین یک فروشگاه، یا چیدمان عناصر تزئینی درون خانه نیز تاثیر دارد.

نکات استفاده از کنتراست در طراحی رابط کاربری

 از رنگ‌های کاملا متفاوت برای عناصر استفاده کنید. به گونه‌ای که متوجه شوید تشخیص رنگ به طور کامل امکان پذیر است و برای کاربر مشخص.

برای متن و عناصر قابل خواندن، از رنگ‌هایی با کنتراست قوی استفاده کنید. با این کار کمک کنید تا کاربر بدون زحمت بتواند مطالب را بخواند.

استفاده از اندازه‌گیری‌های متفاوت، توجه کاربر را به جزئیات جلب کنید. این کار کمک می‌کند تا مطالب درست را در جای خود قرار دهید.

با استفاده  از کنتراست، ترتیب مهمترین عناصر را نشان دهید.

 طراحی را آزمایش کنید و بازخورد کاربران را بگیرید. توجه داشته باشید که این آزمایش به شما کمک بسیاری خواهد کرد.

طراحی را با استانداردهای دسترسی‌پذیری هماهنگ کنید.

 نیازها و ترجیحات مخاطبان را در نظر بگیرید و متناسب با آن رنگ انتخاب کنید

رنگ‌هایی را انتخاب کنید که با یکدیگر همخوانی داشته باشند

در نهایت به این نکته توجه داشته باشید که هدف نهایی طراحی، ایجاد تجربه کاربری بهتر است

نکات تکمیلی 

کنتراست یکی از اصلی ترین معیارهای میزان خوانایی است.

با این وجود در مواردی که کنتراست بسیار بالا است اگر صفحه نمایش زیبتد روشن باشد به چشمان ما فشار وارد میشود .

همیشه باید بین هر دو جنبه زیبایی و قابلیت دسترسی توازن بر قرار کنید.

اگر تصمیم دارید از رنگ های بسیار متضاد و بیش از حددرخشان استفاده کنید باید کاملا هدفمند عمل کنید.

شاید در صفحات رویداد یا محصول خوب عمل کند ولی ممکن است برای پورتال خبری یا فروشگاه الکترونیکی یا برنامه کاربردی بانکی انتخاب مناسبی نباشد.

بهترین کار این است که مقدار اشباع را بیش از 90 درصد تنظیم کنید تا دستتان برای انتخاب ترکیب رنگ مناسب باز باشد.

اگرچه مشکی خالص بهترین کنتراست ممکن را به ویژه روی پس زمینه سفید ایجاد میکند اما بهترین انتخاب برای طراحی های دیجیتال نیست نسبت کنتراست بالا بر خوانایی رابط تاثیر منفی میگذارد.

وقتی کنتراست را در محدوده امن نگه میداریم بهتر است به جای سیاه خالص از رنگ خاکستری تیره استفاده کنیم که تقریبا برای تمام سناریوها مناسب است.